<template>
	<u-tabbar :value="tabValue" @change="changeTab" :zIndex="100" :border="false" 
	:activeColor="'#000'">
		<u-tabbar-item v-for="(item,index) in tabData" :text="item.name" :key="index">
			<view slot="active-icon" class="tabitem curTab">
				<u-icon size="16" :name="item.acticeIcon" color="#000" custom-style="padding-left:4rpx"/>
			</view>
			<view slot="inactive-icon" class="tabitem">
				<u-icon size="16" :name="item.icon" custom-style="padding-left:4rpx"/>
			</view>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	import { userTabBar } from './tabBarDatas'
	export default {
		name: "cTabBar",
		props:{
			tabValue:Number, //默认选中项
		},
		data() {
			return {
				tabData:userTabBar,
			};
		},
		methods: {
			changeTab(e) {
				let pathUrl = this.tabData[e].path
				// console.log("e",e,pathUrl)
				this.$uniRouter.reLaunch({
					url: pathUrl,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-tabbar__content{
		box-shadow:$uni-box-shadow-base;
		.u-tabbar__content__item-wrapper{
			// height: 120rpx;
			.u-tabbar-item{
				.u-tabbar-item__text{
					font-size: $uni-font-size-sm;
				}
			}
		}	
	}
	.tabitem{
		width: 50rpx;
		height: 50rpx;
		background: url('~@/static/images/tabIconBg.png') no-repeat;
		background-size:100% 100% ;
		display: flex;
		align-items: center;
		justify-content: center;
		&.curTab{
			transform: scale(1.2);
		}
	}

</style>
